<html lang="en">
    <head> 
        <meta charset="UTF-8">
        <meta name="viewport" content="width=dev">
        <title>Document</title>
    <head>
    <body>
        <div class="navbox">
            
            <div class="nav">
                
                <div class="nav1 navtotal">网站首页</div>
                <div class="nav2 navtotal">学校概况
                     <div class="nav1 subMenu">
                        <div class="sub-left">
                        <div class="sub-item">学校章程</div>
                        <div class="sub-item">现任领导</div>
                        <div class="sub-item">风光人文</div>
                        <div class="sub-item">办公电话</div>
                        <div class="sub-item">校历</div>
                        <div class="sub-item">作息时间表</div>
                        <div class="sub-item">全景校园</div>
                        <div class="sub-item">新校区规划图</div>
                        <div class="sub-item">校园风光</div>
                        <div class="sub-item">学校宣传片</div>
                        <div class="sub-item">学校简介</div>
                        </div>
                        <div class="sub-right"></div>
                     </div>
                </div>
                <div class="nav3 navtotal">新闻公告<div class="nav2 subMenu"></div></div>
                <div class="nav4 navtotal">机构设置<div class="nav3 subMenu"></div></div>
                <div class="nav5 navtotal">招生就业<div class="nav4 subMenu"></div></div>
                <div class="nav6 navtotal">教育教学<div class="nav5 subMenu"></div></div>
                <div class="nav7 navtotal">校务公开</div>
                <div class="nav8 navtotal">图书馆</div>
                <div class="nav9 navtotal">服务大厅<div class="nav6 subMenu"></div></div>
                <div class="nav10 navtotal">公共信息<div class="nav7 subMenu"></div></div>
                <div class="nav11 navtotal">数字资源<div class="nav8 subMenu"></div></div>
            </div>
        </div>
        <div class="photo"></div>

    <body>
        
    <style>
      .navbox{
            width: 100vw;
            height: 60px;
            background-color:#4070ba;
        }
       .nav{
        width: 1200px;
        height: 60px;
        background-color:  #4070ba;
        margin: auto;
        display: flex;
       } 
       body{
        margin: 0;
       }
       .navtotal{
        width: 200px;
        height: 60px;
        background-color: #4070ba;
        color: white;
        text-align: center;
        line-height: 60px;
       }
       .navtotal:hover{
        background-color:#ecf7ff;
        color:#4070ba;
        cursor: pointer;
        max-width: 120px;
       }
       .subMenu{
        width: 920px;
        height: 160px;
        background-color:rgba(255, 255, 255, 0.6);
        position: relative;
        display: none;
       }
       
        .navtotal:hover>.subMenu{
        display: block;
       }
       .nav1{
        left: -120px;
       }
        .nav2{
        left: -170px;
       }
        .nav3{
        left: -240px;
       }
        .nav4{
        left: -270px;
       }
        .nav5{
        left: -360px;
       }
        .nav6{
        left: -600px;
       }
        .nav7{
        left: -720px;
       }
        .nav8{
        left: -800px;
       }
       .sub-left {
            width: 600px;
            height: 160px;
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
        }
        .sub-right {
            
            background-image: url(https://www.pdsu.edu.cn/images/zs6.jpg);
           
        }
        .sub-item {
            color: #333;
            line-height: 40px;
            cursor: pointer;
        }
        .sub-item:hover {
            color: #4070ba;
            text-decoration: underline;
        }
       .photo{
        width: 1200px;
        height: 410px;
        background-image:url(https://www.pdsu.edu.cn/images/16-9-5000.jpg);
        margin: auto;
        display: flex;
       }

        
</style>
 <html>       
